<template>
  <div>
    <backHeader :pageTitle="movieData.name" />
    <div id="container" class="container" ref="container">
      <div
        style="width:100%;text-align: center;margin-top:10px; margin-bottom:10px;float:left;font-size:13px;"
        v-if="movieData == ''"
      >加载数据中...</div>
      <div :class="['player-box','player-box-'+ device]" ref="playerBox">
        <div id="video" style="width:100%;height:100%;"></div>
        <div class="clear"></div>
      </div>
      <div :class="['movie-msg','movie-msg-'+device]" ref="movieMsg">
        <ul>
          <li>
            <div v-if="device == 'web' ">影片信息</div>
            <div class="movie-msg-cover">
              <img :src="movieData.cover" :onerror="'this.src=\''+ errorCover+'\''" />
            </div>
            <div class="movie-msg-infomation">{{movieData.name}}</div>
            <div class="movie-msg-infomation">{{movieData.year}}</div>
            <div class="movie-msg-infomation">{{movieData.country}}、{{movieData.language}}</div>
            <div class="movie-msg-infomation">{{movieData.director | performerFormat}}</div>
            <div class="movie-msg-infomation">{{movieData.performer | performerFormat}}</div>
            <div
              class="movie-msg-infomation"
              :title="movieData.description"
            >{{movieData.description | descriptionFormat}}</div>
            <div class="clear"></div>
          </li>
        </ul>
      </div>
      <div :class="['play-list','play-list-'+device]" ref="playList">
        <ul>
          <li>
            <div>
              播放列表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span>
                <img
                  id="playState"
                  src="/images/state_disable.png"
                  style="width:10px;height:10px;margin-top:2px;"
                />
              </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;播放源:
              <select @change="changeSource()">
                <option
                  v-for="(sourceItem,index) in currentPlayUris"
                  :key="index"
                  :value="index"
                  :selected="index == currentPlayUrlIndex"
                >{{index+1}}</option>
              </select>
            </div>
            <div v-if="device=='web'">
              <div class="vrmode" style="width:55px;" @click="toVr()" title="请使用手机+VR眼镜+远程监控软件">VR观看</div>
              <div
                class="vrmode"
                style="width:55px;"
                @click="spider(movieData.name)"
                title="重新采集此片"
              >采集</div>
              <div class="vrmode" style="width:55px;" @click="proxy()" title="加速播放">加速</div>
              <div class="clear"></div>
            </div>
            <div class="playlistbox" style="overflow:auto;height:455px;">
              <div
                :class="['play-index',{'play-index-default':!displayType}, {'selectActive':(item.index == currentIndex)}]"
                v-for="item in play_url_list"
                :key="item.index"
                @click="toPlay(item.index)"
                :title="item.name"
               >{{displayType?item.index:item.name}}</div>
              <div class="clear"></div>
              <div
                v-if="debug"
                id="consols"
                ref="consols"
                style="width:100%;height:200px;background:#ffffff;overflow:auto;margin-top:10px;"
              ></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
import backHeader from "@/components/public/backHeader.vue";
import api from "@/lib/apis/movies.js";
import { size, sizeType } from "@/lib/getSize.js";
export default {
  data() {
    return {
      device: size.getDeviceType(),
      movieData: "",
      errorCover: require("@/assets/images/404.png"),
      play_url_list: [],
      displayType: false,
      //播放列表

      //播放器
      currentSources: -1, //当前源
      currentIndex: 0, //当前播放索引
      currentPlayUrl: "", //当前播放地址
      currentPlayUrlIndex: 0, //当前播放地址索引
      currentPlayUris: [], //当前索引地址集合
      currentPlayType: "",
      debug: false,
    };
  },
  mounted() {
    this.initLayout();
    window.pageHandle = this;
    window.debug = this.debug;
    window.videoObject = {
      playerID: "ckplayer01",
      loaded: "loadedHandler",
      container: "#video", // 容器的ID或className
      variable: "player", // 播放函数名称 与下面一致
      volume: 0.1,
      autoplay: true, // 是否自动播放
      live: false, // 是否是直播视频 true = 直播，false = 点播
      mobileCkControls: false, // 是否在移动端（包括ios）环境中显示控制
      video: {
        file: "",
        type: "",
      }, // hls地址
      //debug:true
    };
    window.playerInit = function (url) {
      if (url != null) {
        let m_videoType = window.getVideoType(url);
        if (m_videoType != null) {
          window.videoObject.video.file = url;
          window.videoObject.video.type = m_videoType.playType;
        } else {
          alert("video type only is mp4 or webm or ogg or m3u8.");
          return null;
        }
      }
      //debugger;
      window.player = new ckplayer(window.videoObject);

      window.loadedHandler = function () {
        //console.log("加载监听");
        console.log(window.playurl);
        //已正确监听到播放器加载
        window.player.addListener("duration", durationHandler); //监听总时长
        window.player.addListener("time", timeHandler); //监听当前播放时间
        window.player.addListener("play", playHandler); //监听播放状态
        window.player.addListener("buffer", bufferHandler); //监听缓冲状态
        window.player.addListener("ended", endHandler); //监听是否播放完成
        window.player.addListener("loadTime", loadtimeHandler);
      };
      window.durationHandler = function (v) {
        window.playState = true;
        window.document
          .getElementById("playState")
          .setAttribute("src", "/images/state_success.png");
        window.debugInfo("1-总时长" + v + "<br />");
      };
      function durationHandler(v) {
        window.durationHandler(v);
      }
      window.playHandler = function () {
        window.playState = true;
        window.document
          .getElementById("playState")
          .setAttribute("src", "/images/state_success.png");
        window.debugInfo("1-正在播放<br/>");
      };
      function playHandler() {
        window.playHandler();
      }
      window.timeHandler = function (v) {
        window.playState = true;
        window.document
          .getElementById("playState")
          .setAttribute("src", "/images/state_success.png");
        window.debugInfo("1-当前时间:" + v + "<br/>");
      };
      function timeHandler(v) {
        window.timeHandler(v);
      }
      window.bufferHandler = function (v) {
        window.playState = true;
        window.document
          .getElementById("playState")
          .setAttribute("src", "/images/state_success.png");
        window.debugInfo("1-当前缓冲:" + v + "<br/>");
      };
      function bufferHandler(v) {
        window.bufferHandler(v);
      }
      window.endHandler = function () {
        window.debugInfo("1-播放结束:<br/>");
        window.pageHandle.toPlay(window.pageHandle.currentIndex + 1);
      };
      function endHandler() {
        window.endHandler();
      }
      window.loadtimeHandler = function (v) {
        window.playState = true;
        window.document
          .getElementById("playState")
          .setAttribute("src", "/images/state_success.png");
        window.debugInfo("1-已加载时间:" + v + "<br/>");
      };
      function loadtimeHandler(v) {
        window.loadtimeHandler(v);
      }
    };
    window.getVideoType = function (url) {
      //判断媒体文件类型
      let videoType = null;
      if (/^(http|https):\/\/.*?\.m3u8/gi.test(url)) {
        videoType = { type: "m3u8", playType: "video/m3u8" };
      } else if (
        /^(http|https):\/\/.*?\.(wmv|divx|xvid|mp4|3ivx|rgp|mov|3gp|m4a)/gi.test(
          url
        )
      ) {
        videoType = { type: "mp4", playType: "video/mp4" };
      } else if (/^(http|https):\/\/.*?\.mkv/gi.test(url)) {
        videoType = { type: "webm", playType: "video/webm" };
      } else if (/^(http|https):\/\/.*?\.ogg/gi.test(url)) {
        videoType = { type: "ogg", playType: "video/ogg" };
      }
      return videoType;
    };
    window.debugInfo = function (msg) {
      if (window.debug) {
        window.document.getElementById("consols").innerHTML += msg;
        window.document.getElementById(
          "consols"
        ).scrollTop = window.document.getElementById("consols").scrollHeight;
      }
    };
    window.playurl = "";
    window.playState = false;
    window.newVideo = function (url) {
      if (window.debug) {
        window.document.getElementById("consols").innerHTML = "";
      }
      if (window.player != undefined) {
        let m_videoType = window.getVideoType(url);
        if (m_videoType != null) {
          if (m_videoType.type == "mp4") {
            window.player = null;
            window.playerInit(url);
          } else {
            if (window.videoObject.video.type == m_videoType.playType) {
              window.player.newVideo({ autoplay: true, video: url });
            } else {
              window.player = null;
              window.playerInit(url);
            }
          }
        }
      }
    };
    window.onresize = () => {
      this.initLayout();
    };
    this.getMovieData();
    this.getPlayUrls();
  },
  watch: {
    play_url_list(val) {
      let index = 1;
      if (this.$route.query.index != null) {
        index = this.$route.query.index;
      } else {
        var list = JSON.parse(localStorage.getItem("myhistory") || "[]");
        for (let i = 0; i < list.length; i++) {
          if (list[i].id == this.$route.query.movieId) {
            index = list[i].index;
          }
        }
      }
      let m_url = this.getplayuri(index);
      this.initPlayer(m_url);
    },
  },
  methods: {
    /*
      数据API
    */
    getMovieData() {
      let id = this.$route.query.movieId;
      if (id != null) {
        api
          .getMovieDetail(id)
          .then((response) => {
            this.movieData = response.data;
            window.document.title = this.movieData.name;
            this.getdisplayType(this.movieData.category);
          })
          .catch((error) => {
            //todo loading error
            console.log(error);
          });
      }
    },
    getdisplayType(id) {
      api
        .getCategory(id)
        .then((response) => {
          this.displayType = response.data.display_index;
        })
        .catch((error) => {
          this.displayType = false;
        });
    },
    getPlayUrls() {
      let id = this.$route.query.movieId;
      if (id != null) {
        api
          .getPlayList(id)
          .then((response) => {
            var data = response.data;
            //处理播放地址（多源合一）
            let m_sources = 0;
            let m_index = 0;
            for (let i = 0; i < data.length; i++) {
              if (m_sources != data[i].sources) {
                m_sources = data[i].sources;
                m_index = 0;
              }
              m_index += 1;
              let movie_ret = {
                index: m_index,
                uri: data[i].play_url,
                name: data[i].p_index,
              };
              if (movie_ret.index > this.play_url_list.length) {
                this.play_url_list.push({
                  index: movie_ret.index,
                  name: movie_ret.name,
                  uris: [movie_ret.uri],
                });
              } else {
                this.play_url_list[movie_ret.index - 1].uris.push(
                  movie_ret.uri
                );
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    chanageCurrentPlayUrl(value) {
      this.currentPlayUrl = value;
      this.videobuffer = 0;
      let m_uri = value[1];
      if (this.currentPlayUrl != null) {
        // 监听播放链接是否有效,无效就轮询下一个.
        window.document.title =
          this.movieData.name + "【" + this.currentIndex + "】";
        window.newVideo(m_uri);
        var ret = setTimeout(() => {
          if (!window.playState) {
            this.validVideo();
          } else {
            clearTimeout(ret);
          }
        }, 20000);
        /*保存观看历史*/
        // 处理本地缓存
        var m_history = {
          id: this.movieData.id,
          name: this.movieData.name,
          index: this.currentIndex,
        };
        var list = JSON.parse(localStorage.getItem("myhistory") || "[]");
        var i = 0;
        if (list.length > 20) {
          list.pop();
        }
        for (i; i < list.length; i++) {
          if (list[i].id == m_history.id) {
            list[i].index = m_history.index;
            break;
          }
        }
        if (i >= list.length) {
          list.unshift(m_history);
        }
        localStorage.setItem("myhistory", JSON.stringify(list));
      }
    },

    /*
      播放器相关设置
    */

    initPlayer(url) {
      window.playerInit(url);
    },
    changeSource() {
      // todo 更换源.
      this.currentSources = parseInt(
        event.srcElement.options[event.srcElement.selectedIndex].value
      );
      this.playerNewVideo(this.currentSources);
    },
    validVideo() {
      this.playerNewVideo(this.currentPlayUrlIndex + 1);
    },
    getplayuri(index) {
      //获取播放新视频.
      this.currentIndex = index; //播放成功
      this.currentPlayUrlIndex = 0;
      if (this.currentIndex <= this.play_url_list.length) {
        //获取播放地址集.
        this.currentPlayUris = this.play_url_list[this.currentIndex - 1].uris;
        if (this.currentPlayUris.length > 0) {
          return this.currentPlayUris[0];
        } else {
          return null;
        }
      } else {
        return null;
      }
    },
    toPlay(index) {
      //播放新视频.
      this.currentIndex = index; //播放成功
      this.currentPlayUrlIndex = 0;
      if (this.currentIndex <= this.play_url_list.length) {
        //获取播放地址集.
        this.currentPlayUris = this.play_url_list[this.currentIndex - 1].uris;
        this.playerNewVideo();
      } else {
        alert("已经播放完毕.");
      }
    },
    playerNewVideo(index = -1) {
      window.playState = false;
      window.document
        .getElementById("playState")
        .setAttribute("src", "/images/state_disable.png");
      if (index == -1) {
        this.currentPlayUrlIndex = 0;
      } else {
        this.currentPlayUrlIndex = index;
      }
      if (this.currentSources != -1) {
        if (this.currentSources <= this.currentPlayUris.length) {
          //如果手工切换过源则始终使用此源
          this.currentPlayUrlIndex = this.currentSources;
        }
      }
      //console.log(this.currentPlayUrlIndex);
      if (this.currentPlayUrlIndex <= this.currentPlayUris.length) {
        let url = this.currentPlayUris[this.currentPlayUrlIndex];
        /*处理播放地址*/
        if (/^(http|https):\/\/.*?\.(m3u8|mp4|avi|mov|mpg|mpeg)/gi.test(url)) {
          this.chanageCurrentPlayUrl([this.currentPlayUrlIndex, url]);
        } else {
          api
            .getM3U8File(url)
            .then((response) => {
              this.chanageCurrentPlayUrl([
                this.currentPlayUrlIndex,
                response.data["m3u8"],
              ]);
            })
            .catch((error) => {
              console.log(error);
            });
        }
      } else {
        window.playState = false;
        window.document
          .getElementById("playState")
          .setAttribute("src", "/images/state_error.png");
      }
    },
    toVr() {
      this.$router.push({ path: "vr", query: { uri: this.currentPlayUrl[1] } });
    },
    spider(name) {
      api
        .spiderByName(name)
        .then((response) => {
          if (response.data["state"]) {
            alert("后台开始采集，请稍后...");
          } else {
            alert("指令失败." + response.data["msg"]);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    proxy() {
      alert("敬请期待.");
    },
    /*
      布局相关
    */
    initLayout() {
      //初始化容器.
      this.device = size.getDeviceType();
      let rectSize = size.GET(sizeType.document);
      this.$refs.container.style.width = rectSize.width + "px";
      this.$refs.container.style.height = rectSize.height - 40 + "px";
      this.$refs.container.style.marginTop = "40px";
      this.watchLayout();
    },
    watchLayout() {
      //布局计算.
      let rectSize = size.GET(sizeType.element, this.$refs.container);
      switch (this.device) {
        case "web": {
          //todo web layout
          this.$refs.playerBox.style.width = rectSize.width * 0.6 + "px";
          this.$refs.movieMsg.style.width = rectSize.width * 0.2 + "px";
          this.$refs.playList.style.width = rectSize.width * 0.2 + "px";
          this.$refs.playerBox.style.height = rectSize.height + "px";
          this.$refs.movieMsg.style.height = rectSize.height + "px";
          this.$refs.playList.style.height = rectSize.height + "px";
          this.$refs.playerBox.style.marginLeft = rectSize.width * 0.2 + "px";
          this.$refs.movieMsg.style.marginLeft = "0px;";
          this.$refs.playList.style.marginLeft = rectSize.width * 0.8 + "px";
          break;
        }
        case "pad": {
          //todo pad layout
          this.$refs.playerBox.style.width = rectSize.width + "px";
          this.$refs.movieMsg.style.width = rectSize.width - 10 + "px";
          this.$refs.playList.style.width = rectSize.width - 20 + "px";

          this.$refs.playerBox.style.height = rectSize.height * 0.5 + "px";
          this.$refs.movieMsg.style.height = "auto";
          this.$refs.playList.style.height = "auto";

          this.$refs.playerBox.style.marginLeft = "0px";
          this.$refs.movieMsg.style.marginLeft = "10px;";
          this.$refs.playList.style.marginLeft = "10px";
          this.$refs.playerBox.style.marginTop = "40px;";
          var marginTopPos = 10;
          this.$refs.movieMsg.style.marginTop = marginTopPos + "px";
          this.$refs.playList.style.marginTop = marginTopPos + "px";
          break;
        }
        case "phone": {
          //todo phone layout
          this.$refs.playerBox.style.width = rectSize.width + "px";
          this.$refs.movieMsg.style.width = rectSize.width - 10 + "px";
          this.$refs.playList.style.width = rectSize.width - 20 + "px";

          this.$refs.playerBox.style.height = rectSize.height * 0.3 + "px";
          this.$refs.movieMsg.style.height = "auto";
          this.$refs.playList.style.height = "auto";

          this.$refs.playerBox.style.marginLeft = "0px";
          this.$refs.movieMsg.style.marginLeft = "10px;";
          this.$refs.playList.style.marginLeft = "10px";
          this.$refs.playerBox.style.marginTop = "40px;";
          var marginTopPos = 10;
          this.$refs.movieMsg.style.marginTop = marginTopPos + "px";
          this.$refs.playList.style.marginTop = marginTopPos + "px";
          break;
        }
      }
    },
  },
  filters: {
    descriptionFormat(value) {
      //格式化详细介绍.
      let n =
        size.getDeviceType() == "web"
          ? 180
          : size.getDeviceType() == "pad"
          ? 80
          : 40;
      if (value) {
        if (value.length > n) {
          return value.substring(0, n) + "...";
        } else {
          return value;
        }
      }
    },
    performerFormat(value) {
      let n =
        size.getDeviceType() == "web"
          ? 180
          : size.getDeviceType() == "pad"
          ? 13
          : 13;
      if (value) {
        if (value.length > n) {
          return value.substring(0, n) + "...";
        } else {
          return value;
        }
      }
    },
  },
  components: {
    backHeader,
  },
};
</script>

<style scoped>
/*player-box*/
.playlistbox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.playlistbox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.playlistbox::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  background: #ededed;
}
.player-box {
  background-color: #000000;
  margin: auto;
}

.player-box-web {
  position: absolute;
}
.player-box-pad {
  width: 100%;
}
.player-box-phone {
  width: 100%;
}

/*movie-msg*/
.movie-msg {
  width: 100%;
}
.movie-msg-web {
  position: absolute;
  text-align: center;
}

.movie-msg-web ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.movie-msg-web ul li {
  text-align: center;
  padding-left: 10px;
}
.movie-msg-web ul li div {
  margin: auto;
  width: 80%;
  text-align: left;
  margin-top: 10px;
  font-size: 13px;
}
.movie-msg-web ul li img {
  width: 80%;
  border-radius: 5px;
}
.movie-msg-pad {
  width: 100%;
}
.movie-msg-pad ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  margin-left: 10px;
  background-color: #ffffff;
  border-radius: 5px;
}
.movie-msg-pad ul li {
  text-align: center;
  padding: 10px;
}
.movie-msg-pad ul li div {
  margin: auto;
  width: 100%;
  text-align: left;
  font-size: 13px;
}
.movie-msg-pad ul li .movie-msg-infomation {
  width: 80%;
  margin: 0px;
  padding-left: 130px;
  line-height: 22px;
}
.movie-msg-pad ul li img {
  width: 120px;
  border-radius: 5px;
  max-height: 168px;
  float: left;
}

.movie-msg-phone {
  width: 100%;
}

.movie-msg-phone ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  margin-left: 10px;
  background-color: #ffffff;
  border-radius: 5px;
}
.movie-msg-phone ul li {
  text-align: center;
  padding: 10px;
}
.movie-msg-phone ul li div {
  margin: auto;
  width: 100%;
  text-align: left;
  font-size: 13px;
}
.movie-msg-phone ul li .movie-msg-infomation {
  width: 60%;
  margin: 0px;
  margin-left: 130px;
  line-height: 22px;
}
.movie-msg-phone ul li img {
  width: 120px;
  border-radius: 5px;
  max-height: 168px;
  float: left;
}

/*play-list*/
.play-list {
}
.play-list-web {
  position: absolute;
}

.play-list-web ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.play-list-web ul li {
  text-align: center;
}
.play-list-web ul li div {
  margin: auto;
  width: 90%;
  text-align: left;
  margin-top: 5px;
  font-size: 13px;
}
.play-list-web .vrmode {
  width: 55px;
  height: 35px;
  background-color: #409eff;
  text-align: center;
  line-height: 35px;
  color: #ffffff;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
  float: left;
}
.play-list-web .play-index {
  width: 35px;
  height: 35px;
  background-color: #409eff;
  text-align: center;
  line-height: 35px;
  color: #ffffff;
  float: left;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.play-list-web .play-index-default {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.play-list-web .selectActive {
  background-color: #ffffff;
  color: #409eff;
}

.play-list-pad {
  width: 100%;
  margin-bottom: 10px;
}

.play-list-pad ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  background-color: #ffffff;
  border-radius: 5px;
}
.play-list-pad ul li {
  text-align: center;
  padding: 10px;
}
.play-list-pad ul li div {
  margin: auto;
  width: 90%;
  text-align: left;
  margin: 0px;
  padding: 0px;
  font-size: 13px;
}
.play-list-pad .play-index {
  position: static;
  width: 35px;
  height: 35px;
  background-color: #409eff;
  text-align: center;
  line-height: 35px;
  color: #ffffff;
  float: left;
  margin-top: 10px;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.play-list-pad .play-index-default {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.play-list-pad .selectActive {
  background-color: #ffffff;
  color: #409eff;
}

.play-list-phone {
  width: 100%;
  margin-bottom: 10px;
}

.play-list-phone ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  background-color: #ffffff;
  border-radius: 5px;
}
.play-list-phone ul li {
  text-align: center;
  padding: 10px;
}
.play-list-phone ul li div {
  margin: auto;
  width: 100%;
  text-align: left;
  margin: 0px;
  padding: 0px;
  font-size: 13px;
}
.play-list-phone .play-index {
  position: static;
  width: 30px;
  height: 30px;
  background-color: #409eff;
  text-align: center;
  line-height: 30px;
  color: #ffffff;
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.play-list-phone .play-index-default {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.play-list-phone .selectActive {
  background-color: #ffffff;
  color: #409eff;
}
.clear {
  clear: both;
}
/*container*/
.container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  clear: both;
  background-color: hsl(0, 0%, 96%);
  width: 100%;
  overflow-y: auto;
  text-align: center;
}
.container::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.container::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.container::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  background: #ededed;
}
</style>